import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { SDBody, SDPopup } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import PageProps from '../../../redux'
import { login, logout } from '../../../redux/actions'
import {ACCOUNT_INFO} from '../../../redux/constants'

import MoreIcon from '../../../images/ic_next.png'

import './index.less'
import SDButton from "../../../comps/sd-button";

type PageState = {

}

type PageOwnProps = {}

interface SettingPage {
  props: PageProps & PageOwnProps
}

@connect(({userState}) => ({
  userState
}), (dispatch) => ({
  login(userInfo) {
    dispatch(login(userInfo))
  },
  logout() {
    dispatch(logout())
  }
}))
class SettingPage extends Component<PageOwnProps, PageState> {

  config: Config = {
    navigationBarTitleText: '设置'
  }

  render () {
    const { statusBarHeight } = Taro.getSystemInfoSync()
    const bottomH = statusBarHeight == 44 ? 34 : 0

    return (
      <SDBody sd-class='container'>
        <View className="main-list">
          <View className="cell-item border-bottom_1px" onClick={this.gotoUpdatePwdPage}>
            <View className="title">修改密码</View>
            <View className="right">
              <Image className="more-icon" src={MoreIcon}></Image>
            </View>
          </View>
          <View className="cell-item border-bottom_1px" onClick={this.gotoBindMobilePage}>
            <View className="title">绑定手机号</View>
            <View className="right">
              <View className="sub-title"></View>
              <Image className="more-icon" src={MoreIcon}></Image>
            </View>
          </View>
          <View className="cell-item border-bottom_1px" onClick={this.gotoBindWeChatPage}>
            <View className="title">绑定接收退款微信号</View>
            <View className="right">
              <View className="sub-title"></View>
              <Image className="more-icon" src={MoreIcon}></Image>
            </View>
          </View>
          <View className="cell-item border-bottom_1px" onClick={this.gotoFeedbackPage}>
            <View className="title">意见反馈</View>
            <View className="right">
              <Image className="more-icon" src={MoreIcon}></Image>
            </View>
          </View>
          <View className="cell-item border-bottom_1px" onClick={this.gotoStoreInfoPage}>
            <View className="title">门店资料</View>
            <View className="right">
              <Image className="more-icon" src={MoreIcon}></Image>
            </View>
          </View>
        </View>

        <View style='height:118rpx;'></View>
        <View className="fixed-bottom border-top_1px">
          <View className="bottom-bar">
            <SDButton height={96} sd-class='btn-payment' onClick={this.onLogoutBtnTaped}>退出登录</SDButton>
          </View>
          <View style={`height: ${bottomH}px;`}></View>
        </View>

        <SDPopup ref='compsPopup'>
          <View className="popup-content">
            <View className="tips-content">
              <View className="tips">退出后将删除历史数据，下次登录依然可以使用本账号。</View>
            </View>
            <View className="cell-item border-top_1px border-bottom_1px" onClick={this.execLogout}>退出登录</View>
            <View style='width:100%; height:20rpx; background-color:#f4f4f4;'></View>
            <View className="cell-item cell-item_cancel border-top_1px" onClick={this.dismissPopup}>取消</View>
          </View>
        </SDPopup>
      </SDBody>
    )
  }

  onLogoutBtnTaped = () => {
    this.refs.compsPopup && this.refs.compsPopup.show()
  }

  dismissPopup = () => {
    this.refs.compsPopup && this.refs.compsPopup.dismiss()
  }

  execLogout = () => {
    this.dismissPopup()
    Taro.removeStorageSync(ACCOUNT_INFO)
    this.props.logout()
    Taro.reLaunch({
      url: '/pages/launch/main/index'
    })
  }

  gotoUpdatePwdPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/chpwd/index')
  }

  gotoBindMobilePage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/mobile/validate/index')
  }

  gotoBindWeChatPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/wechat/bind/index')
  }

  gotoFeedbackPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/feedback/index')
  }

  gotoStoreInfoPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/store/info/index')
  }

  preCheck = () => {
    return true
  }
}

export default SettingPage as ComponentClass<PageOwnProps, PageState>
